<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bt{
        width: 50px;
        height: 30px;
        text-align: center;
        /* background-color: red; */

    }
    #div1{
        width: 100px;
        height: 100px;
        background-color: #000;
        margin: 10px auto;

    }
</style>
<body>
    <li>
        心有猛虎 细嗅蔷薇
    </li>
    <form action="">
        <input type="button" class="bt" value="变高" onclick="a_height()">
        <input type="button" class="bt" value="变宽" onclick="a_width()">
        <input type="button" class="bt" value="变色" onclick="a_red()">
        <input type="button" class="bt" value="隐藏" onclick="a_show()">
        <input type="button" class="bt" value="重置" onclick="a_cz()">
        <div id="div1"></div>
    </form>
    
</body>
<script>
    var b=document.getElementById('div1')
    function a_height(){
        console.log(1);
        b.style.height="200px"
    }
    function a_height(){
        console.log(1);
        b.style.height="200px"
    }
    function a_width(){
        console.log(1);
        b.style.width="200px"
    }
    function a_red(){
        console.log(1);
        b.style.backgroundColor="red"
    }
    function a_show(){
        console.log(1);
        b.style.visibility ="hidden"
    }
    function a_cz(){
        console.log(1);
        b.style.cssText ="backgroundColor:#000;wight:100px;height:100px"
    }
</script>
</html>